<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#nav {
				width: 600px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div id="nav">

		</div>
		<script type="text/javascript">
			var mCharts = echarts.init(document.getElementById('nav'), 'dark') //内置的两个主题 light  ,  dark
			var xDataArr = ['张三', '李四', '王五', '瑞图', '小明', '茅台', '二牛', '大强']
			var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
			var option = {
				xAxis: {
					type: 'category',
					data: xDataArr
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					type: 'bar',
					data: yDataArr,
					markPoint: {
						data: [{
								type: 'max',
								name: '最大值'
							},
							{
								type: 'min',
								name: '最小值'
							}
						]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					label: {
						show: true,
						rotate: 60
					},
					barWidth: '30%'
				}]
			};
			mCharts.setOption(option)
		</script>
	</body>
</html>
